<template>
    <section class="reg container">
			<h2>注册</h2>
			<div class="logo">
				<img src="./img/zc_03.png" >
			</div>
            <form :model="form">
			<main style="margin-bottom: 30px;">
				<input type="text" v-model="form.username" placeholder="请输入用户名" >
				<input type="text" v-model="form.password" placeholder="请输入密码">
			</main>
            </form>
			<aside>
				<input id="xieyi" type="checkbox" style="width: 0.426666rem; height: 0.426666rem; border-radius: 50%;"/>
				<label for="xieyi"><span>&nbsp; 同意</span>《管家妈妈服务协议》</label>
			</aside>
			<button type="button">
				<a @click="adduser()" style="color: white;">立即注册</a>
			</button>
			<footer>
				您通过扫描XX管家的邀请码进入该页面注册，填写信息即可
                完成注册。

			</footer>
		</section>
</template>

<script setup>
import { ref,reactive} from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const form = reactive({
  username: "",
  password: "",
  root: "学生",
})
import axios from 'axios';
import request from "../../axios/request.js";
const adduser =()=>{
    
    request({
    url: "http://127.0.0.1:8081/addreg",
    method: "get",
    params: { form },
  })
    .then((res) => {
      console.log(res);
      alert("注册成功！")
      router.push('/')
    })
    .catch((error) => {
      console.log(error);
    });
}
</script>




<style scoped>
form input{
    margin-top: 40px!important;
}
*{
	margin: 0;
	padding: 0;
}
body {
	min-width: 320px;
	max-width: 750px;
	/* flexible 给我们划分了 10 等份 */
	width: 10rem;
	/* width: 100%; */
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial, Helvetica;
	height: 100%;
}
a{
	text-decoration: none;
}
ul li{
	list-style: none;
}
@media screen and (min-width: 750px) {
	html {
		font-size: 75px !important;
	}
}
.container{
	padding: 0 0.8rem;
	box-sizing: border-box;
}
section{
	width: 100%;
	background: url(./img/zc.jpg) no-repeat;
	
	overflow: hidden;
}
section h2{
	margin-top: 1.266666rem;
	text-align: center;
	overflow: hidden;
	color: white;
	margin-bottom: 0.64rem;
	font-size: 0.466666rem;
}
.logo{
	width: 2.666666rem;
	height: 2.653333rem;
	margin: 0 auto;
	margin-bottom: 0.133333rem;
}
.logo img{
	width: 100%;
}
main{
	position: relative;
}

main input{
	height: 1.333333rem;
	width: 100%;
	margin-bottom: 0.266666rem;
	outline: none;
	border: none;
	font-size: 0.386666rem;
	padding-left: 0.933333rem;
	box-sizing: border-box;
}
main input:first-child{
	background: url(./img/zc_07.png) no-repeat 5% 50%;
	background-size: 0.36rem 0.44rem;
	background-color: white;
	
}
main input:nth-child(2){
	background: url(./img/zc_11.png) no-repeat 5% 50%;
	background-size: 0.36rem 0.44rem;
	background-color: white;
	
}
main input:nth-child(3){
	background: url(./img/zc_13.png) no-repeat 5% 50%;
	background-size: 0.36rem 0.44rem;
	background-color: white;
	
}
main input:nth-child(5){
	background: url(./img/zc_071_07.png) no-repeat 5% 50%;
	background-size: 0.36rem 0.44rem;
	background-color: white;
	
}
main em{
	display: inline-block;
	/* background-color: red; */
	content: "发送验证码";
	position: absolute;
	top: 3.533333rem;
	right: 0.4rem;
	font-size: 0.386666rem;
	color: #01a5fe;
	font-style: normal;
}
aside{
	margin-top: 0.466666rem;
	margin-bottom: 0.533333rem;
}
aside label{
	display: inline-block;
	transform: translateY(-0.133333rem);
	font-size: 0.306666rem;
	color: #01a5fe;
	cursor: pointer;
}
aside label span{
	color: white;
}
aside input{
	cursor: pointer;
}
button{
	border: none;
	outline: none;
	height: 1.333333rem;
	color: white;
	font-size: 0.386666rem;
	text-align: center;
	width: 100%;
	background-image: linear-gradient(#fdae3e,#fd7a0c);
	margin-bottom: 0.533333rem;
	cursor: pointer;
}
footer{
	font-size: 0.32rem;
	color: white;
	margin-bottom: 2.4rem;
}
</style>